<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no" /> 
  <link href="pure-min.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript" src="tpl.min.js"></script> 
 </head> 
 <body> 
<header> 
</header> 
<section> 
   <div id="result"></div> 
   <div id="view"></div> 
   <div class="pure-g-r"> 
<script type="tpl" id="tpl">
	for(var i=0;i<12;i++){
		var j=i+1;
		<div class='pure-u-1-3'>
			<span>
				<a href="http://www.baidu.com/s?w=@{i}eee" target="_blank">@i</a>
			</span>
			
		</div>
	}
	
	<select>
		for(var i in data){
			var item = data[i];
			<option value="@item.name">@item.time</option>
		}
	</select>

	<table class='pure-table'>
		<thead>
			<th>名字</th>
			<th>时间</th>
		</thead>
		for(var i in data){
			var item = data[i];
			<tr>
				<td>@item.name</td>
				<td>@item.time</td>
			</tr>
		}
	</table>
</script>


<script type="tpl">

	for(var i=0;i<12;i++){
		var j=i+1;
		<div class='pure-u-1-3'>
			<span>
			!你妹的@j
			</span>
		</div>
	}
	
	<select>
		for(var i in data){
			var item = data[i];
			<option value="@item.name">@item.time</option>
		}
	</select>

	<table class='pure-table'>
		for(var i in data){
			var item = data[i];
			<tr>
				<td>@item.name</td>
				<td>@item.time</td>
			</tr>
		}
	</table>
</script>

</div>



通过ajax获取数据<br>
<script type="tpl" id="id" data-data-url='./users.js' data-tpl-url='./u.html?v'>

</script>
 

<script>
var data = [];

for(var i = 0;i<20;i++){
	data.push({name:"name" +i,time:i*102});
}
	
var start = new Date().getTime();

//最简使用方法
var html = tpl.html(document.getElementById('tpl').innerHTML);

tpl.render();


var compile = new Date().getTime();
//渲染
document.getElementById('view').innerHTML = html;

var end = new Date().getTime();

var compile_time = compile - start;
var render_time = end - compile;

document.getElementById('result').innerHTML = "模版编译(string拼接html)时间：" + compile_time + "毫秒<br/>模版渲染(html插入dom)时间：" + render_time + "毫秒";


</script>  
 </body>
</html>